<template>
  <!-- <div style="background-color: bisque"> -->
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="header"></div>
      </el-header>

      <!-- 内容部分 -->
      <el-main>
        <!-- 跑马灯样式 -->
        <div class="block text-center">
          <el-carousel height="200px">
            <el-carousel-item v-for="item in items" :key="item">
              <a :href="item.link"> <img class="pic" :src="item.url" /></a>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 三个板块 -->
        <el-row>
          <!-- logo -->
          <!-- <el-col :span="8" style="background-color: aqua;"> -->
          <el-col :span="8">
            <img class="logo" src="@/assets/logo.png" />
          </el-col>
          <!-- 注册 -->
          <!-- <el-col :span="8" style="background-color: lightcoral;"> -->
          <el-col :span="8">
            <div class="login-wrap">
              <el-form class="login-container">
                <!-- <h1 class="title">用户注册</h1> -->
                <el-form-item label="端口">
                  <el-select v-model="value">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="账号">
                  <el-input
                    type="text"
                    v-model="username"
                    placeholder="请输入用户名"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input
                    type="password"
                    v-model="password"
                    placeholder="请输入密码"
                    auto-complete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="doLogin()"
                    style="width: 48%"
                    >登录</el-button
                  >
                  <el-button
                    type="primary"
                    @click="doRegister"
                    style="width: 48%"
                    >注册</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <!-- ip形象 -->
          <!-- <el-col :span="8" style="background-color: lemonchiffon;"> -->
          <el-col :span="8">
            <img class="ip" src="@/assets/ip.jpg" />
          </el-col>
        </el-row>
      </el-main>
      <!-- 底部  -->
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Footer from "@/components/Footer.vue";
// import { userInfo } from "os";
import { ref } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "Login",
  components: {
    Footer,
  },
  data() {
    return {
      username: "",
      password: "",
      value: ref(""),
      items: [
        {
          link: "https://mp.weixin.qq.com/s/4GOZv8wLKuQSff1s4z3sng",
          url: require("@/assets/advertisement1.png"),
        },
        {
          link: "https://mp.weixin.qq.com/s/dnFVSOivntpirpcKID4YTg",
          url: require("@/assets/advertisement2.png"),
        },
        {
          link: "https://mp.weixin.qq.com/s/V7J7MC_cFL7md5LZPyii1g",
          url: require("@/assets/advertisement3.png"),
        },
      ],
      options: [
        {
          value: "citizen",
          label: "市民端",
        },
        {
          value: "farmer",
          label: "农户端",
        },
        {
          value: "processing",
          label: "加工端",
        },
        {
          value: "storage",
          label: "仓储端",
        },
        {
          value: "transportation",
          label: "运输端",
        },
      ],
      //由于未与数据库链接。这里用于存储后台用户信息
      users: [
        {
          username: "admin",
          password: "123",
          value: "citizen",
        },
        {
          username: "admin",
          password: "123",
          value: "farmer",
        },
        {
          username: "admin",
          password: "123",
          value: "processing",
        },
        {
          username: "admin",
          password: "123",
          value: "storage",
        },
        {
          username: "admin",
          password: "123",
          value: "transportation",
        },
      ],
    };
  },
  methods: {
    success() {
      ElMessage({
        message: "登录成功！",
        type: "success",
      });
    },
    fail() {
      ElMessage({
        message: "登录失败,请检查账号信息是否正确！",
        type: "error",
      });
    },
    findUser() {
      // 遍历数组对象
      for (let i = 0; i < this.users.length; i++) {
        // 检查账号密码是否匹配
        if (
          this.users[i].username === this.username &&
          this.users[i].password === this.password &&
          this.users[i].value === this.value
        ) {
          // 返回找到的账号密码对象
          return this.users[i];
        }
      }
      // 没有找到符合条件的账号密码对象，返回null
      return null;
    },

    doLogin() {
      const user = this.findUser();
      if (user) {
        this.success();
        if (this.value == "citizen") {
          this.$router.push("/citizen/index");
        }
        if (this.value == "farmer") {
          this.$router.push("/farmer/index");
        }
        if (this.value == "processing") {
          this.$router.push("/processing/index");
        }
        if (this.value == "storage") {
          this.$router.push("/storage/index");
        }
        if (this.value == "transportation") {
          this.$router.push("/transportation/index");
        }
      } else {
        this.fail();
      }
    },
  },
};
</script>

<style lang="css" scoped>
.block {
  width: 1200px;
  margin: 20px auto 0 auto;
}

/* 头部 */
.header {
  height: 50px;
  background-color: rgb(205, 236, 190);
  width: 100%;
  position: fixed;
  top: 0;
  border-bottom: 1px solid rgb(0, 0, 0);
}

/* 顶部留白解决 */
.el-header {
  --el-header-padding: 0;
  height: 50px;
  /* background-color: rgb(203, 128, 240); */
}

/* 底部留白解决 */
.el-footer {
  --el-footer-padding: 0;
  height: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
}

/* 跑马灯样式 */
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 图片大小 */
.pic {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* 内容部分 */
.el-row {
  margin: 50px 0 0 0;
  height: 300px;
}

/* logo部分 */
/* .el-col:nth-child(1) {
  position: relative;
} */

.logo {
  height: 100px;
  margin: 100px auto;
}

/* ip部分 */
.ip {
  height: 300px;
}

/* 注册部分 */
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 5%;
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

/* .title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
} */
</style>
